<template>
	<view>
		<view class="item">
			<view class="item-top">
				<image :src="info.userInfo.avatarUrl" class="top-img"></image>
				<view class="">
					<view class="top-name">{{info.userInfo.nickName}}</view>
					<view class="top-time">{{info.time | formatDate}}</view>
				</view>
			</view>
			<view class="item-bom">
				<view class="item-title">{{info.title}}</view>
				<view class="item-text">{{info.details}}</view>
				<swiper class="swiper" circular indicator-dots indicator-color="rgba(255,255,255,.5)"
					indicator-active-color="#ffffff" duration="500" autoplay interval="3000">
					<swiper-item class="swiper-item" v-for="(item, index) in info.imgList" :key="index">
						<image class="img" :src="item"></image>
					</swiper-item>
				</swiper>
				<view class="icon-box">
					<view class="icon-item">
						<image src="/static/images/icon/icon-zan.png" class="icon"></image>
					</view>
					<view class="icon-item">
						<image src="/static/images/icon/icon-ping.png" class="icon"></image>
					</view>
					<view class="icon-item">
						<image src="/static/images/icon/icon-share.png" class="icon"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				post_id: '',
				info: '',
			}
		},
		computed: {},
		watch: {},
		methods: {
			async getInfo() {
				const db = wx.cloud.database()
				const info = await db.collection('post').where({
					post_id: this.post_id
				}).get()
				console.log(info)
				if (info.data) {
					this.info = info.data[0]
					console.log(this.info)
				}
			},
		},
		onLoad(options) {
			// console.log(options.id)
			this.post_id = parseInt(options.id)
			this.getInfo()
		},
		onShow() {},
		onReady() {},
		onPullDownRefresh() {},
		onReachBottom() {},
		onShareAppMessage() {
			// if (res.from === 'button') {// 来自页面内分享按钮
			//   console.log(res.target)
			// }
			return {
				title: this.info.title,
				path: '/sub-community/post/post?id='+this.info.post_id
			}
		},
		onPageScroll() {},

	}
</script>

<style lang="scss" scoped>
	.item {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		width: 750rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-radius: 10rpx;

		.item-top {
			padding: 30rpx;
			display: flex;
			align-items: center;
			margin-left: 20rpx;

			.top-img {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.top-name {
				font-size: 28rpx;
			}

			.top-time {
				font-size: 24rpx;
				color: #bfbfbf;
			}
		}

		.item-bom {
			margin: 30rpx;

			.item-title {
				font-size: 30rpx;
			}

			.item-text {
				font-size: 26rpx;
				margin-top: 20rpx;
			}

			.swiper {
				margin-top: 50rpx;
				width: 690rpx;
				height: 380rpx;
				border-radius: 20rpx;
				overflow: hidden;

				.swiper-item {
					width: 690rpx;
					height: 380rpx;
					border-radius: 20rpx;

					.img {
						width: 690rpx;
						height: 380rpx;
						border-radius: 20rpx;
					}
				}

			}

			.icon-box {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;

				.icon {
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
	}
</style>
